import React, {useContext, useEffect, useState} from 'react';
import {Alert, View, TouchableOpacity, ImageBackground, Dimensions} from 'react-native';
import { Button, Divider, Image, ListItem, Text } from 'react-native-elements';
import QRCode from 'react-native-qrcode-svg';
import Clipboard from '@react-native-community/clipboard';
import Toast from 'react-native-simple-toast';

import LocaleContext from '../libs/locale';
import WalletContext from '../libs/wallet';
import logo from '../assets/Rlogo.png';
import {keyPairFromSeed,bytes2Hex} from "../libs/keyPair";

const {width,height,scale} = Dimensions.get("window");

const ChatQRcode = ({ navigation }: any) => {
    const locale: any = useContext(LocaleContext);
    const wallet: any = useContext(WalletContext);
    const [coin, setCoin] = useState('SAT');
    const NewTiTle = locale._("QR_code");

    useEffect(() => {
        navigation.setOptions({ title: NewTiTle })
    })

    const onCopy = () => {
        Clipboard.setString(wallet.address);
        Toast.show(locale?._('copied'));
    };

    const getPublicKey = () => {
        let keyPair:any = keyPairFromSeed(wallet.seed);
        let publicKey = keyPair.publicKey;
        let publicKeyStr = bytes2Hex(publicKey);
        return publicKeyStr;
    }

    return (
        <View style={{ margin: 40 }}>
            <View style={{ elevation: 2, borderRadius: 8 }}>
                <View>
                    <View style={{
                        height: 54,
                        backgroundColor: '#7460E3FF',
                        borderTopLeftRadius: 8,
                        borderTopRightRadius: 8,
                    }} />
                    <View style={{
                        height: 270,
                        backgroundColor: '#FFFFFF',
                        borderBottomLeftRadius: 8,
                        borderBottomRightRadius: 8,
                    }} />
                </View>
                <View style={{ position: 'absolute', alignItems: 'center', width: '100%' }}>
                    <Text style={{
                        fontWeight: 'bold',
                        fontSize: 18,
                        color: '#FFFFFF',
                        marginVertical: 6,
                    }}>{coin}</Text>
                    <View style={{ backgroundColor: '#E7E3FFFF', borderRadius: 46, marginBottom: 20 }}>
                        <ImageBackground source={logo} style={{ width: 46, height: 46 }} />
                    </View>
                    <QRCode value={JSON.stringify({address:wallet.address,publicKey:getPublicKey()})} size={140} />
                    <Text style={{
                        marginTop: 20,
                        fontWeight: 'bold',
                        color: '#333333FF',
                        width: width*0.6,
                        textAlign: 'center'
                    }}>{wallet.address}</Text>
                    <Text style={{
                        marginTop: 6,
                        fontWeight: 'bold',
                        color: 'grey',
                        width: width*0.8,
                        textAlign: 'center',
                        fontSize:10
                    }}>{locale._("QR_code_Tip")}</Text>
                </View>
                <View style={{
                    position: 'absolute',
                    alignItems: 'flex-end',
                    width: '100%',
                }}>
                    {/* <TouchableOpacity
            onPress={() => Alert.alert('', '敬请期待')}
            style={{ padding: 16 }}
          >
            <Text
              style={{ fontSize: 14, fontWeight: 'bold', color: 'white' }}
            >{locale?._('Assets.receive.switch')}</Text>
          </TouchableOpacity> */}
                </View>
            </View>
        </View>
    );
};

export default ChatQRcode;
